<template>
    <div class="navigation">
            <el-menu  :default-active="onRoutes" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <!-- <el-menu-item index="/">
                    <span slot="title">首页</span>
                </el-menu-item> -->
                <el-menu-item index="otherZoneHomePage">
                    <span slot="title">他人主页</span>
                </el-menu-item>
                <!-- <el-menu-item index="learningSpace">
                    <span slot="title">学习空间</span>
                </el-menu-item> -->
                <el-menu-item index="articleMain">
                    <span slot="title">文章</span>
                </el-menu-item>
                <el-menu-item index="otherZoneResources">
                    <span slot="title">资源</span>
                </el-menu-item>
                <!-- <el-menu-item index="studentTask">
                    <span slot="title">任务</span>
                </el-menu-item> -->
                <el-menu-item index="otherZoneAlbum">
                    <span slot="title">相册</span>
                </el-menu-item>
                <el-menu-item index="otherZoneQuestions">
                    <span slot="title">提问答疑</span>
                </el-menu-item>
                <el-menu-item index="otherZoneFollow/follow?routerKeyPath=['follow','allFollow']">
                    <span slot="title">关注</span>
                </el-menu-item>
                <!-- <el-menu-item index="studentDynamic">
                    <span slot="title">关注动态</span>
                </el-menu-item>
                <el-menu-item index="classDynamic">
                    <span slot="title">班级动态</span>
                </el-menu-item>
                <el-menu-item index="schoolDynamic">
                    <span slot="title">学校动态</span>
                </el-menu-item>
                <el-menu-item index="12">
                    <span slot="title">应用</span>
                </el-menu-item> -->
            </el-menu>
        </div>
</template>

<script>
export default {
    data(){
        return {
            activeIndex: '/otherZone/otherZoneHomePage'
        }
    },
    computed: {
        onRoutes() {
            return this.$route.path.replace('/otherZone/', '');
        }
    },
    methods:{
      handleSelect(key, keyPath) {
        this.$router.replace({
            path: '/otherZone/'+key
        })
      }
    }
}
</script>

<style lang="scss" scoped>
.navigation{    
    width:81%;
    overflow-x: hidden;
    margin:auto;
}
.el-menu.el-menu--horizontal{
    border-bottom:0px
}
.el-scrollbar__wrap {
    overflow-x: hidden;
}
</style>